import {$,$$} from "../modules/public.js"
import indextou from "../modules/indextou.js"
import toast from "../modules/toast.js"
import ajax from "../modules/ajax.js"

indextou()
$$(".nav2 .cont ul li")[0].onmousemove=function(){
    $(".nav2 .list").style.display="flex"
}
$$(".nav2 .cont ul li")[0].onmouseleave=function(){
    $(".nav2 .list").style.display="none"
}
const res=JSON.parse(sessionStorage.getItem("key"))
$(".cont1").innerHTML=`
  <div class="box2">
  <div class="big"><img src="${res.data2[0].img1[1]}"><span></span><i></i></div>
  <p><img src="${res.data2[0].img1[0]}"><img src="${res.data2[0].img2[0]}"><img src="${res.data2[0].img3[0]}"></p>
  </div>
  <div class="minetext">
  <h1>${res.data1[0].brief1}</h1>
  <h4>${res.data1[0].brief2}</h4>
  <div class="price">
  <p>价&nbsp;&nbsp;&nbsp;&nbsp;格<span style="font-size:20px">￥${res.data1[0].price}</span><p>
  <p>促&nbsp;&nbsp;&nbsp;&nbsp;销<span class="bor">赠送积分</span>购买即赠商城积分，积分可抵现~<p>
  </div>
  <hr>
  <div class="product-stock">
  <input type="text" class="product-stock-text" placeholder="1" value="1" disabled="disabled">
  <p class="product-stock-btn"><a href="javascript:;">+</a><a href="javascript:;">−</a></p>
  </div>
  <div class="cart">加入购物车</div>
  </div>
  <div class="glass"><img src="${res.data2[0].img1[1]}"></div>`

  $(".cont1 .box2 span").onmouseenter=function(){
    $(".cont1 .box2 span").onmousemove=function(eve){
      const e=eve||window.event
      // console.log(e.offsetX,e.offsetY);
      $(".cont1 .box2 i").style.display="block"
      $(".cont1 .glass").style.display="block"
      $(".cont1 .glass img").src=$(".cont1 .box2 .big img").src
      $(".cont1 .box2 i").style.left=e.offsetX-112.5+"px"
      $(".cont1 .box2 i").style.top=e.offsetY-112.5+"px"
      $(".cont1 .glass img").style.left=- 800/450*(e.offsetX-112.5)+"px"
      $(".cont1 .glass img").style.top=- 800/450*(e.offsetY-112.5)+"px"
      if(e.offsetX<112.5){$(".cont1 .box2 i").style.left=0+"px";$(".cont1 .glass img").style.left=0+"px"}
      if(e.offsetX>337.5){$(".cont1 .box2 i").style.left=225+"px";$(".cont1 .glass img").style.left=-400+"px"}
      if(e.offsetY<112.5){$(".cont1 .box2 i").style.top=0+"px";$(".cont1 .glass img").style.top=0+"px"}
      if(e.offsetY>337.5){$(".cont1 .box2 i").style.top=225+"px";$(".cont1 .glass img").style.top=-400+"px"}
    }
  }
  $(".cont1 .box2 span").onmouseout=function(){
    $(".cont1 .box2 span").onmouseenter=null
    $(".cont1 .box2 i").style.display="none"
      $(".cont1 .glass").style.display="none"
  }
  
  let img=[]
  for(let key in res.data2[0]){
    if(res.data2[0][key][1]){
      img.push(res.data2[0][key][1])
    }
  }
  let index=0
  for(let i=0;i<$$(".cont1 .box2 p img").length;i++){
    $$(".cont1 .box2 p img")[index].style.border="1px solid #000"
    $$(".cont1 .box2 p img")[i].onmouseenter=function(){
      $$(".cont1 .box2 p img")[index].style.border="0"
      $$(".cont1 .box2 p img")[i].style.border="1px solid #000"
      $(".cont1 .box2 .big img").src=img[i+1]
      index=i
      }
  }
  $(".product-stock-btn").onclick=function(eve){
    const e=eve||window.event
    const target=e.target||e.srcElement
    if(target.innerHTML==='+'){
      $(".product-stock-text").value=Number($(".product-stock-text").value)+1
    }
    if(target.innerHTML==='−'){
      if($(".product-stock-text").value<="1"){
        $(".product-stock-text").value=1
      }else{
        $(".product-stock-text").value=Number($(".product-stock-text").value)-1
      }
    }
  }
  let data=JSON.parse(sessionStorage.getItem("key")).data1[0]
  data.num=Number($(".product-stock-text").value)
  console.log(data);
  $(".cart").onclick=function(){
    if(sessionStorage.getItem("token")){
      ajax({
        url:"http://localhost:3000/cartadd",
        method:"post",
        data
      }).then(res=>{
        sessionStorage.setItem("data",res)
        toast({
          type:"success",
          position:"center",
          title:"成功加入购物车",
          close:()=>{
            location.assign("http://localhost:3000/cart.html");
          }
        })
      })
    }else{
      toast({
        type:"error",
        position:"center",
        title:"未登录",
        close:()=>{
          location.assign("http://localhost:3000/index.html");
        }
      })
    }
  }
  